<div :class='calendarClass'>
      <context-menu-container>
      <template v-if="events.length > 0">
        <div class="event-legends">
          <div :class="{'event-lengend':true, 'EMEQDEBUG':true, 'event-disabled':!isShowlegend.EMEQDEBUG}" @click="legendTrigger('EMEQDEBUG')">
            <div class="lengend-icon" style="background:rgba(255, 0, 0, 1);"></div>
            <span style="color:;">事故记录</span>
          </div>
          <div :class="{'event-lengend':true, 'EMEQKEEP':true, 'event-disabled':!isShowlegend.EMEQKEEP}" @click="legendTrigger('EMEQKEEP')">
            <div class="lengend-icon" style="background:rgba(103, 58, 183, 1);"></div>
            <span style="color:;">保养记录</span>
          </div>
          <div :class="{'event-lengend':true, 'EMEQMAINTANCE':true, 'event-disabled':!isShowlegend.EMEQMAINTANCE}" @click="legendTrigger('EMEQMAINTANCE')">
            <div class="lengend-icon" style="background:rgba(255, 149, 0, 1);"></div>
            <span style="color:;">抢修记录</span>
          </div>
          <div :class="{'event-lengend':true, 'EMEQSETUP':true, 'event-disabled':!isShowlegend.EMEQSETUP}" @click="legendTrigger('EMEQSETUP')">
            <div class="lengend-icon" style="background:rgba(4, 0, 255, 1);"></div>
            <span style="color:;">更换安装</span>
          </div>
          <div :class="{'event-lengend':true, 'EMEQCHECK':true, 'event-disabled':!isShowlegend.EMEQCHECK}" @click="legendTrigger('EMEQCHECK')">
            <div class="lengend-icon" style="background:rgba(0, 255, 47, 1);"></div>
            <span style="color:;">维修记录</span>
          </div>
        </div>
        <FullCalendar
          ref="calendar"
          :locale="$i18n.locale"
          height="parent"
          :firstDay="1"
          :eventLimit="true"
          :editable="!isSelectFirstDefault && true"
          :buttonText="buttonText" 
          :header="header"
          :plugins="calendarPlugins"
          :events="searchEvents"
          :customButtons="customButtons"
          :validRange="validRange"
          :defaultDate="defaultDate"
          :eventRender="eventRender"
          @dateClick="onDateClick.apply(_self, arguments)"
          @eventClick="onEventClick.apply(_self, arguments)"
          @eventDrop="onEventDrop.apply(_self, arguments)"
          defaultView="dayGridMonth"/>
          <modal v-model="modalVisible" width="250px" :title="$t('app.calendar.dateSelectModalTitle')" class-name='date-select-modal' @on-ok="gotoDate.apply(_self, arguments)">
            <el-date-picker style="width: 200px;" v-model="selectedGotoDate" type="date"></el-date-picker>
          </modal>
      </template>
      <template v-else>
        <span class="app-data-empty">{{ $t('entities.emeqah.eqahcalendar_calendar.nodata') }}</span>
      </template>
      </context-menu-container>
</div>
